import { Card } from "antd";
import BalanceChartCard from "./components/BalanceChartCard";
import StatisticCard from "./components/StatisticCard";
import ExpenditureTypeChartCard from "./components/ExpenditureTypeChartCard";
import ExpenditureProjectChartCard from "./components/ExpenditureProjectChartCard";
import IncomeTypeChartCard from "./components/IncomeTypeChartCard";
import IncomeProjectChartCard from "./components/IncomeProjectChartCard";
import ProjectStatisticChartCard from "./components/ProjectStatisticChartCard";
import TotalStatisticChartCard from "./components/TotalStatisticChartCard";

const Home = () => {
  return (
    <div className="flex flex-col h-full">
      {/*  */}
      <Card>
        {/* 统计 */}
        <StatisticCard />
      </Card>
      {/*  */}
      <Card className="mt-24">
        {/* 当日账户余额统计 */}
        <BalanceChartCard />
      </Card>
      {/*  */}
      <div className="mt-24 flex flex-1">
        <Card className="flex-1">
          {/* 支出类型 */}
          <ExpenditureTypeChartCard />
        </Card>
        <Card className="ml-24 flex-1">
          {/* 收入类型 */}
          <IncomeTypeChartCard />
        </Card>
      </div>
      {/*  */}
      <div className="mt-24 flex flex-1">
        <Card className="flex-1">
          {/* 支出项目 */}
          <ExpenditureProjectChartCard />
        </Card>
        <Card className="ml-24 flex-1">
          {/* 收入项目 */}
          <IncomeProjectChartCard />
        </Card>
      </div>
      {/*  */}
      <Card className="mt-24">
        {/* 收支项目统计 */}
        <ProjectStatisticChartCard />
      </Card>
      {/*  */}
      <Card className="mt-24">
        {/* 总支收按年对比 */}
        <TotalStatisticChartCard />
      </Card>
    </div>
  );
};
export default Home;
